jQuery 1.3 : Headline rotator (part 2) - Retrieving the feed

Retrieving the feed

To retrieve the feed, we'll use the $.get() method, one of jQuery's many AJAX functions for communicating with the server. This method, as we have seen before, allows us to operate on content from a remote source by using a success handler. The content of the feed is passed to this handler as an XML structure. We can then use jQuery's selector engine to work with this data.

$(document).ready(function() {
$('#news-feed').each(function() {
var $container = $(this);
$container.empty();
$.get('news/feed.xml', function(data) {
$('rss item', data).each(function() {
// Work with the headlines here.
});
});

});
});

Now, we need to combine the parts of each item into a usable block of HTML markup. We can use .each() again to go through the items in the feed and build the headline links:

$(document).ready(function() {
headline rotatorfeed, retrieving$('#news-feed').each(function() {
var $container = $(this);
$container.empty();
$.get('news/feed.xml', function(data) {
$('rss item', data).each(function() {
var $link = $('<a></a>')
.attr('href', $('link', this).text())
.text($('title', this).text());
var $headline = $('<h4></h4>').append($link);
$('<div></div>')
.append($headline)
.appendTo($container);

});
});
});
});

We get the text of each item's<title> and<link> elements, and construct the<a> element from them. This link is then wrapped in an<h4> element. We put each news item into<div id="news-feed">, but for now we're omitting the headline class on each news item's containing<div> so that we can more easily see our work in progress.

In addition to the headlines, we want to display a bit of supporting information about each article. We'll grab the publication date and article summary, and display these as well.

$(document).ready(function() {
$('#news-feed').each(function() {
var $container = $(this);
$container.empty();
$.get('news/feed.xml', function(data) {
$('rss item', data).each(function() {
var $link = $('<a></a>')
.attr('href', $('link', this).text())
.text($('title', this).text());
var $headline = $('<h4></h4>').append($link);
var pubDate = new Date(
$('pubDate', this).text());
var pubMonth = pubDate.getMonth() + 1;
var pubDay = pubDate.getDate();
var pubYear = pubDate.getFullYear();
var $publication = $('<div></div>')
.addClass('publication-date')
.text(pubMonth + '/' + pubDay + '/'
+ pubYear);
var $summary = $('<div></div>')
.addClass('summary')
.html($('description', this).text());

$('<div></div>')
.append($headline, $publication, $summary)

.appendTo($container);
});
});
});
});


					  

The date information in an RSS feed is encoded in RFC 822 format, which includes date, time, and time zone information (for example, Sun, 28 Sep 2008 18:01:55 +0000). This format is not particularly eye-pleasing, so we use JavaScript's built-in Date object to produce a more compact representation of the date (such as. 9/28/2008)

The summary information is easier to retrieve and format. It's worth noting, though, that in our sample feed, some HTML entities may exist in the description. To make sure that these are not automatically escaped by jQuery, we need to use the .html() method to insert the description into the page, rather than the .text() method.

With these new elements created, we insert them into the document using the .append() method. Note here that we are using a new feature of the method; if more than one argument is supplied, all of them get appended in sequence.